@import "./mixin";

html,
body {
    height: 100%;
}

.ui-basic-data {
    &.main_view {
        height: 100%;
        width: 100%;
    }

    .top-header-bar {
        position: relative;
        z-index: 15;
        height: 60px;
        background: linear-gradient(45deg, #202456 0%, #0a3b67 100%);
        @include bgi-cover('bg-top-bar.png');
        background-position: top center;

        &.has-shadow {
            box-shadow: 0px 5px 10px #00000054;
        }

        .header-bar-main {
            width: 1200px;
            margin: 0 auto;
        }

        .menu-list {
            display: inline-block;
            vertical-align: top;
            margin-left: 80px;
        }

        .menu-item {
            position: relative;
            display: inline-block;
            vertical-align: top;
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            letter-spacing: 1px;
            color: #ffffff;

            &:not(:last-child) {
                margin-right: 70px;
            }

            &:hover {
                font-weight: bold;
            }
        }

        .menu-item-link {
            width: 100%;
            height: 100%;
            color: #ffffff;
            opacity: 0.65;


            &.is-active {
                opacity: 1;
                font-weight: bold;

                .menu-item-label,
                .menu-item-icon {
                    color: #fff;
                }

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 4px;
                    background-color: #1d94f7;
                }
            }
        }

        .logo {
            position: relative;
            display: inline-block;
            vertical-align: top;
            height: 100%;
            padding: (60px - 28px) / 2 0;

            > * {
                display: inline-block;
                vertical-align: top;
            }

            .header-icon {
                height: 38px;
                width: 38px;
                margin-top: -5px;
                margin-right: 10px;
                @include bgi-contain("logo4.svg");
            }

            p {
                width: 102px;
                height: 28px;
                @include bgi-center("name.png");
                transform: translateY(2px);
            }
        }
    }

    .bar-btns {
        float: right;
        line-height: 60px;
        color: #fff;
        background: transparent;
    }

    .ivu-menu-submenu {
        padding: 0;
    }

    .main-wrap {
        height: calc(100% - 60px);
        background-color: #eaecf2;
    }

    .basic-data-main {
        position: relative;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .common-container {
        position: relative;
        width: 1200px;
        margin-right: auto;
        margin-left: auto;
        background-color: #fff;
    }
}
